<template>
  <div>
    <!-- 分享面板组件 -->
    <van-share-sheet
      v-model="isChshow"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
      class="sharePage"
      :safe-area-inset-bottom="true"
      @click-overlay="pageShow"
      @cancel="pageShow"
    />
  </div>
</template>

<script>
// 分享面板组件
import { ShareSheet } from "vant";
// 轻提示组件
import { Toast } from "vant";
export default {
  data() {
    return {
      isChshow: false,
      // 分享面板信息
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
    };
  },
  props: ["showShare"],
  methods: {
    // 分享面板方法
    onSelect(option) {
      Toast(option.name);
      this.pageShow();
    },
    pageShow() {
      this.isChshow = false;
      // 父组件修改 showShare 的方法
      this.$parent.isShow();
    },
  },
  watch: {
    showShare(newVal, oldVal) {
      this.isChshow = newVal;
    },
  },
};
</script>

<style lang="scss" scoped></style>
